<template>
  <dir>
     <div id="video">
        <div class="img_box">
           <a class="img_a video_btn" href="">
              <i class="video_icon"></i>
              <img src="" alt="">
           </a>
        </div>
        <div class="video_main"></div>
     </div>
  </dir>
</template>
<script>
export default {
  data: () => ({})
}
</script>
<style lang="scss" scoped>
#video {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}
#video .img_box {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
#video .img_box .img_a {
    display: block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    font-size: 0;
}
#video .img_box .img_a .video_icon {
    cursor: pointer;
    border: 5px solid #00aeef;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    z-index: 5;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
</style>